<template>
  <el-container class="home-container">
    <!--头部区域-->
    <el-header style="height: 50px">

      <div style="margin-left: 18px;height: 55px" @click="toHome">
        <h1  style="color: #cd7e40" >基于springboot框架的快递配送系统的设计与实现</h1>
      </div>

      <el-dropdown class="right">
                <span class="el-dropdown-link">
                 个人中心<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="updateUserData">修改密码</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="avatar">

      </div>
      <el-button size="mini" type="primary" @click="logout">注销</el-button>
    </el-header>

    <div style="height: 8px;background-color: #cd7e40"></div>
    <!-- 页面主体区域-->
    <el-container>
      <!--  侧边栏-->
      <el-aside :width="isCollapse?'64px':'200px'" style="background-color: #ffffff">

        <!--   侧边栏菜单区域-->
        <el-menu :collapse="isCollapse"
                 :collapse-transition="false"
                 :router="true" active-text-color="#cd7e40"
                 background-color="#ffffff"
                 text-color="#000000"
                 unique-opened>
          <!-- 一级菜单-->
          <el-submenu v-for="item in menuList" :key="item.id" :index="item.id+''">
            <!--一级菜单的模板区域-->
            <template slot="title">
              <!--图标-->
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <!--二级菜单-->
            <el-menu-item v-for="subItem in item.children" :key="subItem.id"
                          :class="$route.path===subItem.path?'is-active':''"
                          :index="subItem.path+''">
              <template slot="title">
                <i :class="subItem.icon"></i>
                <span>{{ subItem.name }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--右侧内容主体-->
      <el-main>
        <!--                <Welcome ref="Welcome"/>-->
        <router-view/>

        <!--修改密码-->
        <el-dialog
          :visible.sync="updateDialog"
          title="修改密码"
          width="30%"
        >
          <el-form style="margin-top:10px">
            <el-form ref="userDataRef" :model="userData1" :rules="userDataRules" label-width="80px">
              <el-form-item label="旧密码" prop="username">
                <el-input v-model="userData1.username"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="password">
                <el-input v-model="userData1.password"></el-input>
              </el-form-item>
            </el-form>
          </el-form>
          <span slot="footer" class="dialog-footer">
                     <el-button @click=" updateDialog  = false">取 消</el-button>
                     <el-button type="primary" @click="updateDialogClick">确 定</el-button>
                    </span>
        </el-dialog>

      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import { Message, MessageBox } from 'element-ui'
import { logout, menuList, updatePwd } from '../api/boot/api'

export default {
  data() {
    return {
      menuList: [],
      isCollapse: false,
      infoDialog: false,
      display: 'none',
      userDataDialog: false,
      updateDialog: false,
      userData: {
        username: null
      },
      userData1: {
        username: null,
        password: null
      },
      userDataRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入您的联系方式', trigger: 'blur' },
          { min: 11, max: 11, message: '格式错误', trigger: 'blur' }],
        email: [{ required: true, message: '请输入您的邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }]
      },
      myNotice: []
    }
  },
  created() {
    this.getMenuList()
  },

  methods: {
    toHome(){
      this.$router.push("/")
    },
    updateDialogClick() {
      updatePwd(this.userData1).then((res) => {
        this.updateDialog = false
        this.msgSuccess("修改成功");
        this.userData1 = {

        }
      })
      // const res = this.$http.get('/updatePwd', { params: this.userData1 })

    },
    logout() {
      MessageBox.confirm('是否注销登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        //清除session中的数据，跳转
        logout().then((res) => {
          if (res) {
            window.sessionStorage.clear()
            this.$router.push('/login')
          }
        })

      }).catch(() => {
        Message({
          type: 'info',
          message: '已取消删除'
        })

      })

    },
    async getMenuList() {
      menuList().then((res) => {
        this.menuList = res.obj
      })
      // const res = await this.$http.get('/menuList')

    },
    //打开用户资料对话框
    updateUserData() {
      this.updateDialog = true
      this.userData = this.$store.state.user
      console.log(this.$store.state.user.userface)

    }
  }
}
</script>

<style lang="less" scoped>

.home-container {
  height: 100%;
}

.el-header {
  /*background-color: #545E6A;*/
  color: #ffffff;

  /*background-color: #FFFFFF;*/
  display: flex;
  justify-content: space-between;
  padding-left: 0px; //距离左边的距离
  align-items: center;
  /*color: #fff;*/
  /*font-size: 20px;*/
  /*.font {*/
  /*    position: absolute;*/
  /*    left: 100px;*/
  /*}*/

  .bell {
    margin-right: 5px;
    margin-bottom: 6px;
    font-size: 20px;
    color: #ffffff;
  }

  .notice {
    margin-top: 10px;
    margin-right: 170px;
  }

  .el-button {
    position: absolute;
    right: 20px;
  }

  .right {
    position: absolute;
    right: 100px;
  }

  .avatar {
    /*height: 40px;*/
    /*width: 40px;*/
    display: flex;
    align-items: center;
    /*border: 1px solid #24394E;*/
    /*border-radius: 50%;*/
    position: absolute;
    left: 10px;
    /*.avatar-img {*/
    /*    width: 50px;*/
    /*    height: 50px;*/
    /*    border-radius: 50%;*/
    /*    background-color: #eee;*/
    /*}*/
  }

}

.el-aside {
  background-color: #000b17
;

  .el-menu {
    border-right: none;
  }
}

.el-main {
  background-color: #ffffff;
  /*background-color: #283647;*/
  color: #303133;
}

.toggle-button {
  left: 200px;
  background-color: #DCDFE6;
  font-size: 20px;
  line-height: 24px;
  color: black;
  text-align: center;
  cursor: pointer;
}

.el-dropdown-link {
  //color: #eeeeee;
}

.font {
  height: 60px;
  width: 200px;
  display: flex;
  align-items: center;

  > img {
    width: 100%;
    height: 100%;
    background-color: #24394E;

  }
}

.avatar-uploader .el-upload {
  width: 100px;
  height: 100px;
  border: 1px solid #909399;
  cursor: pointer;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);

}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  border: 1px solid #909399;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.updateAvatar {
  width: 100px;
  height: 100px;
  display: block;
  border: 1px solid #909399;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-avatar {
  > img {
    display: block;
    height: auto;
    width: 100%;
    vertical-align: middle;
  }
}

</style>
